<template>
  <div style="padding:20px" v-if="zfNameflag">
    <parklist :getParkDetail="parkChange" :getParkNameMap="getParkName"></parklist>
    <div class="yuanqu">
      <div style="display:flex;width: 100%">
        <div style="width: 34%">
          <div class="left_baidu" style="overflow: hidden">
            <div style="font-size:18px; margin:20px;color: #333333;font-weight:700; text-align:center; width:150;">园区排名</div>
            <div style="margin-left:20px">
              <el-date-picker
                v-model="month1"
                type="month"
                :picker-options="pickerOptions"
                :clearable="false"
                :editable="false"
                @change="getDataByMonth('parkInfo')"
                placeholder="选择月">
              </el-date-picker>
            </div>
            <div style="width: 100%;height:590px;padding: 10px 20px 20px 20px">
              <el-table :data="parkInfo"
                  class="customer-table"
                  :key="ranking1"
                  :row-style="{height:'50px'}"
                  :cell-style="{padding:'0px'}"
                  style="width: 100%"
                  height="560px"
                  ref="table1"
                  :default-sort="{ prop: 'point'}"
                  @sort-change="sortRankChange"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column type="index" label="排名" width="60px" header-align="center" align="center"></el-table-column>
                <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称">
                  <template scope="scope">
                    <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492FF" @click="getDataByPark(scope.row)">{{scope.row.nameAbbreviation}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="waterExcellentDays" :formatter="formatCount" width="145px" sortable="custom" :sort-orders="['descending', 'ascending']" :show-overflow-tooltip="true" label="水质量优良天数" align="center"></el-table-column>
                <el-table-column prop="airExcellentDays" :formatter="formatCount" width="135px" sortable="custom" :sort-orders="['descending', 'ascending']" :show-overflow-tooltip="true" label="空气优良天数" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="right_all">
          <el-row class="right_top">
            <div style="font-size:18px; margin:20px;color: #333333;font-weight:700; text-align:center; width:150;">环保报警详情</div>
            <div style="margin-left:20px">
              <el-date-picker
                v-model="year1"
                type="year"
                :picker-options="pickerOptions"
                :clearable="false"
                :editable="false"
                @change="getDataByMonth('Alarm')"
                placeholder="选择月">
              </el-date-picker>
            </div>
            <div class="warnControll_charts" style="padding: 10px 20px 20px 20px">
              <div id="annular1" style="width:100%;height:280px"></div>
            </div>
          </el-row>
          <el-row class="right_center">
            <div style="font-size:18px; margin-top:20px; color: #333333; font-weight:700; text-align:center; width:100%;">
              空气质量天数比
              <span style="color:#999999;font-size:14px"> ( {{parkName}} ) </span>
            </div>
            <div class="warnControll_charts" style="padding: 20px">
              <div id="annular2" style="width:100%;height:170px"></div>
            </div>
          </el-row>
        </div>
        <div class="right_all">
          <el-row class="right_top">
            <div style="font-size:18px; margin:20px;color: #333333;font-weight:700; text-align:center; width:150;">环保实时报警</div>
            <div style="margin-left: 20px;font-size: 14px;line-height: 19px;margin-bottom:15px;margin-top:15px;color: #999999">时间截止至: {{nowTime}}</div>
            <div class="warnControll_charts" style="padding: 10px 20px 20px 20px">
              <el-table :data="realTimeAlarm"
                  class="customer-table"
                  :row-style="{height:'43px'}"
                  :cell-style="addclass"
                  style="width: 100%"
                  height="270px"
                  ref="table2"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column type="index" label="排名" width="70px" header-align="center" align="center"></el-table-column>
                <el-table-column prop="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
                <el-table-column prop="proportion" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警数占比"></el-table-column>
                <el-table-column prop="alarmCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警数">
                  <template scope="scope">
                    <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #1492FF" @click="showDetail(scope.row)">{{scope.row.alarmCount}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog
                :title="tittleName"
                :visible.sync="dialogVisible"
                width="50%"
                center>
                <el-table :data="AlarmDetail"
                  class="customer-table"
                  :row-style="{height:'32px'}"
                  :cell-style="{padding:'0px'}"
                  style="width: 100%"
                  height="370px"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                  <el-table-column prop="entName" min-width="110px" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
                  <el-table-column prop="alarmTypeName" :show-overflow-tooltip="true" label="报警类型" header-align="center" align="center"></el-table-column>
                  <el-table-column prop="alarmStatus" :show-overflow-tooltip="true" label="报警状态" header-align="center" align="center"></el-table-column>
                  <el-table-column prop="alarmTime" :show-overflow-tooltip="true" label="报警时间" header-align="center" align="center"></el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top:20px;text-align: center"
                  background
                  layout="prev, pager, next"
                  :total="pagination.total"
                  :page-size="pagination.pageSize"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </el-dialog>
            </div>
          </el-row>
          <el-row class="right_center">
            <div style="font-size:18px; margin-top:20px; color: #333333; font-weight:700; text-align:center; width:100%;">
              空气主要污染物成分
              <span style="color:#999999;font-size:14px"> ( {{parkName}} ) </span>
            </div>
            <div class="warnControll_charts" style="padding: 20px">
              <div id="annular3" style="width:100%;height:170px"></div>
            </div>
          </el-row>
        </div>
      </div>
    </div>
    <div class="securitybottom">
      <div style="display: flex;">
        <div style="width:34.5%">
          <div class="warnControll">
            <div class="safePersonCount_title">
              <span class="title_sty">
                水质量天数比
                <span style="color:#999999;font-size:14px"> ( {{parkName}} ) </span>
              </span>
            </div>
            <div id="annular4" style="width:100%;height:170px;padding:0 20px"></div>
          </div>
        </div>
        <div style="margin-left: 1.4%;width:65%">
          <div class="warnControll">
            <div class="safePersonCount_title">
              <span class="title_sty">
                水体主要污染物成分
                <span style="color:#999999;font-size:14px"> ( {{parkName}} ) </span>
              </span>
            </div>
            <div class="fiveChart">
              <div id="annular51" class="item"></div>
              <div id="annular52" class="item"></div>
              <div id="annular53" class="item"></div>
              <div id="annular54" class="item"></div>
              <div id="annular55" class="item"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="securitybottom" style="height:100px">
      <div style="display: flex;">
        <div style="width:25%">
          <div class="warnControll" style="height:100px">
            <div style="display:flex">
              <div class="flexbox">
                <img src="~@/assets/img/env1.png">
              </div>
              <div class="flexbox2">
                <div style="margin-top:20px">气压</div>
                <div style="margin-top:20px">{{pressure}} Pa</div>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-left: 1.4%;width:25%">
          <div class="warnControll" style="height:100px">
            <div style="display:flex">
              <div class="flexbox">
                <img src="~@/assets/img/env2.png">
              </div>
              <div class="flexbox2">
                <div style="margin-top:20px">湿度</div>
                <div style="margin-top:20px">{{humidity}} %RH</div>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-left: 1.4%;width:47%">
          <div class="warnControll" style="height:100px">
            <iframe scrolling="no" :src="url" frameborder="0" width="100%" height="100%" allowtransparency="true"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import parklist from '@/components/parklist'
import dd from 'gdt-jsapi'
import 'echarts-liquidfill/src/liquidFill.js'
const echarts = require('echarts')
export default {
  components: { parklist },
  data () {
    return {
     parkNameMap: new Map(),
      now: '',
      nowTime: '', // 当前时间

      parkInfo:[],
      parkName:'',
      realTimeAlarm:[],
      
      month1: '',
      year1: '',
      selecedMonth1: '',
      selecedYear1: '',

      myChart1: {},
      option1: {},
      myChart2: {},
      option2: {},
      myChart3: {},
      option3: {},
      myChart4: {},
      option4: {},

      myChart51: {},
      option51: {},
      myChart52: {},
      option52: {},
      myChart53: {},
      option53: {},
      myChart54: {},
      option54: {},
      myChart55: {},
      option55: {},
      value51: 0,
      value52: 0,
      value53: 0,
      value54: 0,
      value55: 0,
      percentage51: 0,
      percentage52: 0,
      percentage53: 0,
      percentage54: 0,
      percentage55: 0,

      rankingName: '水质量优良天数',
      rankingType: '',
      sort: '',
      ranking1: '',
      parkCode:'',
      
      url:'',
      dialogVisible: false, // 环保实时报警
      tittleName: '环保实时报警详情', //  环保实时报警弹窗名
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },

      flag: true, // 判断取不取排名表

      humidity:0, // 湿度
      pressure:0, // 气压
      zfNameflag: true,
      AlarmDetail: [],
      accidentDetail: {},
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        }
      },
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res =>{
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:',res);
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  mounted () {
    this.getDate()

    this.renderMyChart1()
    this.renderMyChart2()
    this.renderMyChart3()
    this.renderMyChart4()
    this.renderMyChart51()
    this.renderMyChart52()
    this.renderMyChart53()
    this.renderMyChart54()
    this.renderMyChart55()

    this.getData()
    this.getRealTimeAlarm()
    
    // 表格轮播
    this.getright_table1()
    this.getright_table2()
  },
  methods: {
    getDate () {
      this.now = new Date()
      this.nowTime = this.now.getFullYear() + '-' + this.formatDate(this.now, 'MM-dd hh:mm:ss')

      this.month1 = new Date()
      this.year1 = new Date()
      let temp = ''
      temp = this.month1.getMonth() + 1
      if (temp < 10) {
        temp = '0' + temp.toString()
      }
      temp = this.month1.getFullYear().toString() + temp
      this.selecedMonth1 = temp
      this.selecedYear1 = this.year1.getFullYear().toString()
    },
    addclass (value) {
      if (value.column.label === '报警数' || value.column.label === '优良天数') {
        return { color: '#1492FF', padding: '0px' }
      } else {
        return { padding: '0px' }
      }
    },
    formatCount (row, column, cellValue, index) {
      if (cellValue !== -1 && cellValue !== '0.00%' && cellValue !== 'NaN%') {
        return cellValue
      } else {
        return '—'
      }
    },
    // 切换园区
    parkChange (data) {
      sessionStorage.setItem('routeName1', data.coordinateList[0].name)
      this.$router.push({
        name: 'zfParkDetail',
        query: {
          data: data
        }
      })
    },
    getParkName (map) {
      this.parkNameMap = map
    },
    getData () { 
      this.$http.post(`home/chemical/parkInfoGovPage/getEnvironmentalProtection`,
        {
          months:this.selecedMonth1,
          parkCode:this.parkCode,
          rankingType:this.rankingType,
          sort:this.sort
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          // 园区排名
          if (this.flag === true) {
            this.parkInfo = res.data.parkEnvironmentRanking
            this.parkName = res.data.parkEnvironmentRanking[0].nameAbbreviation
            let temp = this.parkInfo[0].cityName.slice(0,this.parkInfo[0].cityName.length - 1)
            this.url = "https://tianqiapi.com/api.php?style=tt&skin=cucumber&city=" + temp
          }else{
            this.parkInfo.forEach(item=>{
              if (item.nameAbbreviation===this.parkName) {
                let temp = item.cityName.slice(0,item.cityName.length - 1)
                this.url = "https://tianqiapi.com/api.php?style=tt&skin=cucumber&city=" + temp
              }
            })
          }
          // 环保报警详情
          this.option1.series[0].data = res.data.EnvironmentalProtectionAlarm.thisYearValue
          this.option1.series[1].data = res.data.EnvironmentalProtectionAlarm.lastYearValue
          this.myChart1.setOption(this.option1,true)
          // 空气质量比
          this.option2.series[0].data = res.data.airQualityDaysRatio
          this.option2.series[0].data.forEach(item =>{
            if (item.name === '优') {
              item.itemStyle = {
                normal:{
                  color: "#00E400"
                }
              }
            }else if (item.name === '良') {
              item.itemStyle = {
                normal:{
                  color: "#EDC24A"
                }
              }
            }else if (item.name === '轻度污染') {
              item.itemStyle = {
                normal:{
                  color: "#FF7E00"
                }
              }
            }else if (item.name === '中度污染') {
              item.itemStyle = {
                normal:{
                  color: "#FF0000"
                }
              }
            }else if (item.name === '重度污染') {
              item.itemStyle = {
                normal:{
                  color: "#990000"
                }
              } 
            }else if (item.name === '严重污染') {
              item.itemStyle = {
                normal:{
                  color: "#7E0000"
                }
              } 
            }
          })
          this.myChart2.setOption(this.option2,true)
          // 空气主要成分
          this.option3.series[0].data = res.data.airPollutantConcentration
          this.option3.series[0].data.forEach(item =>{
            if (item.name === 'PM2.5' || item.name === 'PM10' || item.name === 'SO2' || item.name === 'NO2' || item.name === 'O3') {
              item.unit = 'μg/m³'
            }else if (item.name === 'CO') {
              item.unit = 'mg/m³'
            }
          })
          this.option3.tooltip.formatter
          this.myChart3.setOption(this.option3,true)
          // 水质量比
          this.option4.series[0].data = res.data.waterQualityDaysRatio
          this.option4.series[0].data.forEach(item =>{
            if (item.name === '优') {
              item.itemStyle = {
                normal:{
                  color: "#00E400"
                }
              }
            }else if (item.name === '良好') {
              item.itemStyle = {
                normal:{
                  color: "#EDC24A"
                }
              }
            }else if (item.name === '轻度污染') {
              item.itemStyle = {
                normal:{
                  color: "#FF7E00"
                }
              }
            }else if (item.name === '中度污染') {
              item.itemStyle = {
                normal:{
                  color: "#FF0000"
                }
              }
            }else if (item.name === '重度污染') {
              item.itemStyle = {
                normal:{
                  color: "#990000"
                }
              } 
            }
          })
          this.myChart4.setOption(this.option4,true)

          // 水质量比
          this.value51 = res.data.waterPollutantConcentration[0].sourceValue
          if (res.data.waterPollutantConcentration[0].sourceValue === -1) {
            this.value51 = '—'
            this.percentage51 = 0
          }
          // this.option51.title[0].text = this.value51 + '\n' + res.data.waterPollutantConcentration[0].name
          this.percentage51 = res.data.waterPollutantConcentration[0].value
          this.option51.series[0].data[0].value = this.percentage51
          // this.option51.series[0].data[1].value = this.percentage51
          // this.option51.series[1].data[0] = (this.percentage51 * 100).toFixed(0)

          this.myChart51.setOption(this.option51,true)

          this.value52 = res.data.waterPollutantConcentration[1].sourceValue
          if (res.data.waterPollutantConcentration[1].sourceValue === -1) {
            this.value52 = '—'
            this.percentage52 = 0
          }
          this.option52.title[0].text = this.value52 + 'mg/L' + '\n' + res.data.waterPollutantConcentration[1].name
          this.percentage52 = res.data.waterPollutantConcentration[1].value
          if (res.data.waterPollutantConcentration[1].waterCategory === '优') {
            this.option52.series[0].color = ['#00E400','#25f136']
          }else if (res.data.waterPollutantConcentration[1].waterCategory === '良好') {
            this.option52.series[0].color = ['#EDC24A','#f7c439']
          }else if (res.data.waterPollutantConcentration[1].waterCategory === '轻度污染') {
            this.option52.series[0].color = ['#FF7E00','#ff8810']
          }else if (res.data.waterPollutantConcentration[1].waterCategory === '中度污染') {
            this.option52.series[0].color = ['#FF0000','#f82c2c']
          }else if (res.data.waterPollutantConcentration[1].waterCategory === '重度污染') {
            this.option52.series[0].color = ['#990000','#f54545']
          }
          this.option52.series[0].data[0] = this.percentage52
          this.option52.series[0].data[1].value = this.percentage52
          // this.option52.series[1].data[0] = (this.percentage52 * 100).toFixed(0)
          // this.percentage52 = res.data.waterPollutantConcentration[1].value
          // this.option52.series[0].data[0].value = this.percentage52
          this.myChart52.setOption(this.option52,true)

          this.value53 = res.data.waterPollutantConcentration[2].sourceValue
          if (res.data.waterPollutantConcentration[2].sourceValue === -1) {
            this.value53 = '—'
            this.percentage53 = 0
          }
          this.option53.title[0].text = this.value53 + 'mg/L' + '\n' + res.data.waterPollutantConcentration[2].name
          this.percentage53 = res.data.waterPollutantConcentration[2].value
          if (res.data.waterPollutantConcentration[2].waterCategory === '优') {
            this.option53.series[0].color = ['#00E400','#25f136']
          }else if (res.data.waterPollutantConcentration[2].waterCategory === '良好') {
            this.option53.series[0].color = ['#EDC24A','#f7c439']
          }else if (res.data.waterPollutantConcentration[2].waterCategory === '轻度污染') {
            this.option53.series[0].color = ['#FF7E00','#ff8810']
          }else if (res.data.waterPollutantConcentration[2].waterCategory === '中度污染') {
            this.option53.series[0].color = ['#FF0000','#f82c2c']
          }else if (res.data.waterPollutantConcentration[2].waterCategory === '重度污染') {
            this.option53.series[0].color = ['#990000','#f54545']
          }
          this.option53.series[0].data[0] = this.percentage53
          this.option53.series[0].data[1].value = this.percentage53
          // this.option53.series[1].data[0] = (this.percentage53 * 100).toFixed(0)
          this.myChart53.setOption(this.option53,true)

          this.value54 = res.data.waterPollutantConcentration[3].sourceValue
          if (res.data.waterPollutantConcentration[3].sourceValue === -1) {
            this.value54 = '—'
            this.percentage54 = 0
          }
          this.option54.title[0].text = this.value54 + 'mg/L' + '\n' + res.data.waterPollutantConcentration[3].name
          this.percentage54 = res.data.waterPollutantConcentration[3].value
          if (res.data.waterPollutantConcentration[3].waterCategory === '优') {
            this.option54.series[0].color = ['#00E400','#25f136']
          }else if (res.data.waterPollutantConcentration[3].waterCategory === '良好') {
            this.option54.series[0].color = ['#EDC24A','#f7c439']
          }else if (res.data.waterPollutantConcentration[3].waterCategory === '轻度污染') {
            this.option54.series[0].color = ['#FF7E00','#ff8810']
          }else if (res.data.waterPollutantConcentration[3].waterCategory === '中度污染') {
            this.option54.series[0].color = ['#FF0000','#f82c2c']
          }else if (res.data.waterPollutantConcentration[3].waterCategory === '重度污染') {
            this.option54.series[0].color = ['#990000','#f54545']
          }
          this.option54.series[0].data[0] = this.percentage54
          this.option54.series[0].data[1].value = this.percentage54
          // this.option54.series[1].data[0] = (this.percentage54 * 100).toFixed(0)
          this.myChart54.setOption(this.option54,true)

          this.value55 = res.data.waterPollutantConcentration[4].sourceValue
          if (res.data.waterPollutantConcentration[4].sourceValue === -1) {
            this.value55 = '—'
            this.percentage55 = 0
          }
          this.option55.title[0].text = this.value55 + 'mg/L' + '\n' + res.data.waterPollutantConcentration[4].name
          this.percentage55 = res.data.waterPollutantConcentration[4].value
          if (res.data.waterPollutantConcentration[4].waterCategory === '优') {
            this.option55.series[0].color = ['#00E400','#25f136']
          }else if (res.data.waterPollutantConcentration[4].waterCategory === '良好') {
            this.option55.series[0].color = ['#EDC24A','#f7c439']
          }else if (res.data.waterPollutantConcentration[4].waterCategory === '轻度污染') {
            this.option55.series[0].color = ['#FF7E00','#ff8810']
          }else if (res.data.waterPollutantConcentration[4].waterCategory === '中度污染') {
            this.option55.series[0].color = ['#FF0000','#f82c2c']
          }else if (res.data.waterPollutantConcentration[4].waterCategory === '重度污染') {
            this.option55.series[0].color = ['#990000','#f54545']
          }
          this.option55.series[0].data[0] = this.percentage55
          this.option55.series[0].data[1].value = this.percentage55
          // this.option55.series[1].data[0] = (this.percentage55 * 100).toFixed(0)
          this.myChart55.setOption(this.option55,true)

          // 园区
          this.parkCode = res.data.parkCode
          this.getCurrentEnvironmentalData(this.parkCode)
        }
      })
    },
    // 环保实时报警
    getRealTimeAlarm () {
      this.$http.post(`home/chemical/parkInfoGovPage/getRealTimeAlarm`,{}
      ).then(({ data: res }) => {
        if (res.code === 0) {
          let realTimeAlarmTotal = res.data.RealTimeAlarm.reduce(
            (acc, current) => acc + Number(current.alarmCount), 0
          )
          res.data.RealTimeAlarm.forEach((item) => {
            this.realTimeAlarm.push({
              entName: item.entName,
              entCode: item.entCode,
              alarmCount: item.alarmCount,
              proportion: ((Number(item.alarmCount) / realTimeAlarmTotal) * 100).toFixed(2) + '%'
              
            })
          })
        }
      })
    },
    // 环保报警详情
    getEnvironmentalProtectionAlarm () {
      this.$http.post(`home/chemical/parkInfoGovPage/getEnvironmentalProtectionAlarm`,
        {
          years: this.selecedYear1,
          parkCode: this.parkCode
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.option1.series[0].data = res.data.EnvironmentalProtectionAlarm.thisYearValue
          this.option1.series[1].data = res.data.EnvironmentalProtectionAlarm.lastYearValue
          this.myChart1.setOption(this.option1,true)
        }
      })
    },
    // 气压湿度
    getCurrentEnvironmentalData (val) {
      this.$http.post(`home/chemical/parkInfoGovPage/getCurrentEnvironmentalData`,{
        parkCode:val
      }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.humidity = res.data.humidity
          this.pressure = res.data.pressure
          if (this.humidity === -1) {
            this.humidity = '—'
          }
          if (this.pressure === -1) {
            this.pressure = '—'
          }
        }
      })
    },
    // 园区排名 点击园区
    getDataByPark (item) {
      this.flag = false  // 不更新排名表
      this.parkCode = item.parkCode
      this.parkName = item.nameAbbreviation
      this.getData()
    },
    // 园区排名排序
    sortRankChange(item) {
      this.rankingName = item.column.label
      this.rankingType = item.prop
      this.sort = item.order
      this.parkCode = ''
      this.flag = true  // 更新排名表
      this.getData()
    },
    // 报警数详情
    showDetail (name) {
      this.accidentDetail = { ...name }
      this.AlarmDetail = []
      this.dialogVisible = true
      this.tittleName = this.accidentDetail.entName + '环保实时报警详情'
      
      this.pagination.currentPage = 1
      this.pagination.total = 0
      this.handleCurrentChange()
    },
    // 报警数详情翻页
    handleCurrentChange (val) {
      if (val && val !== null) {
        this.pagination.currentPage = val
      }
      this.$http.post(`home/chemical/parkInfoGovPage/getAlarmRecordDetail`,{
        // months: this.selecedMonth1,
        entCode: this.accidentDetail.entCode,
        limit:10,
        page:this.pagination.currentPage
      })
      .then(({ data: res }) => {
        if (res.code === 0) {
          this.pagination.total = Number(res.data.count)
          let arr = []
          res.data.data.forEach(item => {
            arr.push({
              alarmTime: item.alarmTime,
              entName: item.entName,
              alarmStatus: item.alarmStatus === 0 ? '未处理' : item.alarmStatus === 1 ? '已处理' : '',
              alarmTypeName: item.alarmTypeName
            })
          })
          this.AlarmDetail = arr
        }
      })
    },
    // 园区排名选年月
    getDataByMonth(val){
      if (val === 'parkInfo') {  // 园区排名
        // 月
        let temp = ''
        temp = this.month1.getMonth() + 1
        if (temp < 10) {
          temp = '0' + temp.toString()
        }
        temp = this.month1.getFullYear().toString() + temp
        this.selecedMonth1 = temp
        
        // 页面根据选择月份取值
        this.parkCode = ''
        this.rankingType = ''
        this.sort = ''
        this.flag = true  // 更新排名表
        this.getData()

        //  环保报警显示 选择月份的同年
        if (this.month1.getFullYear().toString() !== this.selecedYear1) {
          this.year1 = new Date(this.month1.getFullYear() + 1, 0, 0)
          this.selecedYear1 = this.month1.getFullYear().toString()
          this.getEnvironmentalProtectionAlarm()
        }
      }else if (val === 'Alarm') { // 环保报警
        this.selecedYear1 = this.year1.getFullYear().toString()
        this.getEnvironmentalProtectionAlarm()
      }
    },
    // 环保报警详情
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      this.option1 = {
        animationDuration: 5000,
        backgroundColor: '#FFF',
        legend: {
          // type: 'scroll',
          top: '1%',
          left: '1%',
          data: ['今年报警数', '去年报警数']
        },
        grid: {
          left: '1%',
          right: '5%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        left: 'center',
        top: '11px',
        xAxis: [
          {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisPointer: {
              type: 'shadow'
            },
            name: "月",
            nameLocation: "end",//坐标位置，支持start,end，middle
            nameTextStyle: {//字体样式
              fontSize: 12,//字体大小
              padding: -10 //距离坐标位置的距离
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          },
          {
            axisLabel: {
              show: false
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '今年报警数',
            type: 'bar',
            data: [],
            color: '#1492FF'
          },
          {
            name: '去年报警数',
            type: 'line',
            data: [],
            color: '#FA9358'
          }
        ]
      }
      // 绘制图表
      this.myChart1.setOption(this.option1)
    },
    // 空气质量比
    renderMyChart2 () {
      var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var _this = this;
      let charPiecurrentIndex = 0
      _this.myChart2 = echarts.init(document.getElementById('annular2'))
      _this.option2 = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}天({d}%)"
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          type: 'scroll'
        },
        // color: ["#09d0fb", "#91CC75", "#95f8fe", "#f9f390", "#ecfeb7"],
        series: [
          {
            // roseType: 'area',
            type: "pie",
            radius: ['65%', '85%'],
            center: ["40%", "50%"],
            legendHoverLink: false,
            label: {
              //标识
              normal: {
                show: false,
                position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '25',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
      _this.myChart2.setOption(_this.option2);
      // 鼠标移动上去的时候的高亮动画
      _this.myChart2.on("mouseover", function(param) {
        flag = false;
        clearInterval(_this.startCharts2);
        //取消之前高亮图形
        _this.myChart2.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex     
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
        
        //高亮当前图形
        _this.myChart2.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
        
        _this.myChart2.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      //图标随窗口大小缩放
      window.addEventListener("resize", function() {
        _this.myChart2.resize();
      })

      //自动高亮显示
      var chartHover = function() {
        var dataLen = _this.option2.series[0].data.length;

        // 取消之前高亮的图形
        _this.myChart2.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        charPiecurrentIndex = (charPiecurrentIndex+ 1) % dataLen;
         
        // 高亮当前图形
        _this.myChart2.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        _this.myChart2.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this.startCharts2 = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      _this.myChart2.on("mouseout", function(param) {
        if (!flag) {
          _this.startCharts2 = setInterval(chartHover, 2000);
          flag = true;
        }
      })
    },
    // 空气主要成分
    renderMyChart3 () {
      var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var _this = this;
      let charPiecurrentIndex = 0
      _this.myChart3 = echarts.init(document.getElementById('annular3'))
      _this.option3 = {
        tooltip: {
          trigger: "item",
          // formatter: "{b} : {d}"
          formatter: (item) => {
            let templete = '';
            if (item.data.sourceValue === -1) {
              item.data.sourceValue = '-'
            }
            templete = item.data.name + ' : ' + item.data.sourceValue + item.data.unit
            return templete
          },
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          type: 'scroll'
        },
        // color: ["#09d0fb", "#91CC75", "#95f8fe", "#f9f390", "#ecfeb7"],
        series: [
          {
            // roseType: 'area',
            type: "pie",
            legendHoverLink: false,
            // radius: ['65%', '85%'],
            center: ["40%", "50%"],
            label: {
              //标识
              normal: {
                show: false,
                // position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
      _this.myChart3.setOption(_this.option3);
      // 鼠标移动上去的时候的高亮动画
      _this.myChart3.on("mouseover", function(param) {
        flag = false;
        clearInterval(_this.startCharts3);
        //取消之前高亮图形
        _this.myChart3.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex     
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
        
        //高亮当前图形
        _this.myChart3.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
        
        _this.myChart3.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      //图标随窗口大小缩放
      window.addEventListener("resize", function() {
        _this.myChart3.resize();
      })

      //自动高亮显示
      var chartHover = function() {
        var dataLen = _this.option3.series[0].data.length;

        // 取消之前高亮的图形
        _this.myChart3.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        charPiecurrentIndex = (charPiecurrentIndex+ 1) % dataLen;
         
        // 高亮当前图形
        _this.myChart3.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        _this.myChart3.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this.startCharts3 = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      _this.myChart3.on("mouseout", function(param) {
        if (!flag) {
          _this.startCharts3 = setInterval(chartHover, 2000);
          flag = true;
        }
      })
    },
    // 水质量比
    renderMyChart4 () {
      var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var _this = this;
      let charPiecurrentIndex = 0
      _this.myChart4 = echarts.init(document.getElementById('annular4'))
      _this.option4 = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}天({d}%)"
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          type: 'scroll'
        },
        // color: ["#09d0fb", "#91CC75", "#95f8fe", "#f9f390", "#ecfeb7"],
        series: [
          {
            // roseType: 'area',
            type: "pie",
            legendHoverLink: false,
            radius: ['65%', '85%'],
            center: ["40%", "50%"],
            label: {
              //标识
              normal: {
                show: false,
                position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '25',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
      _this.myChart4.setOption(_this.option4);
      // 鼠标移动上去的时候的高亮动画
      _this.myChart4.on("mouseover", function(param) {
        flag = false;
        clearInterval(_this.startCharts4);
        //取消之前高亮图形
        _this.myChart4.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex     
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
        
        //高亮当前图形
        _this.myChart4.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
        
        _this.myChart4.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      //图标随窗口大小缩放
      window.addEventListener("resize", function() {
        _this.myChart4.resize();
      })

      //自动高亮显示
      var chartHover = function() {
        var dataLen = _this.option4.series[0].data.length;

        // 取消之前高亮的图形
        _this.myChart4.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        });
        charPiecurrentIndex = (charPiecurrentIndex+ 1) % dataLen;
         
        // 高亮当前图形
        _this.myChart4.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        _this.myChart4.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this.startCharts4 = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      _this.myChart4.on("mouseout", function(param) {
        if (!flag) {
          _this.startCharts4 = setInterval(chartHover, 2000);
          flag = true;
        }
      })
    },
    // 水体主要成分
    renderMyChart51 () {
      this.myChart51 = echarts.init(document.getElementById('annular51'))
      // this.value51 = 0.4;
      this.option51 = {
        // backgroundColor: '#fff',
        // title: [
        //   {
        //     text: (this.value51 * 100).toFixed(0) + '%' + '\n' + '水温',
        //     left: '48%',
        //     top: '40%',
        //     textAlign: 'center',
        //     textStyle: {
        //       fontSize: '18',
        //       fontWeight: '400',
        //       color: '#8b8d90',
        //       textAlign: 'center',
        //       textBorderColor: 'rgba(0, 0, 0, 0)',
        //       textShadowColor: '#000',
        //       textShadowBlur: '0',
        //       textShadowOffsetX: 0,
        //       textShadowOffsetY: 1
        //     }
        //   }
        // ],
        // polar: {
        //   radius: ['65%', '83%'],
        //   center: ['50%', '50%']
        // },
        // angleAxis: {
        //   max: 100,
        //   clockwise: false,
        //   axisLine: {
        //     show: false
        //   },
        //   axisTick: {
        //     show: false
        //   },
        //   axisLabel: {
        //     show: false
        //   },
        //   splitLine: {
        //     show: false
        //   }
        // },
        // radiusAxis: {
        //   type: 'category',
        //   show: true,
        //   axisLabel: {
        //     show: false
        //   },
        //   axisLine: {
        //     show: false
        //   },
        //   axisTick: {
        //     show: false
        //   }
        // },
        // series: [
        //   {
        //     type: 'liquidFill',
        //     radius: '80%',
        //     z: 1,
        //     center: ['50%', '50%'],
        //     color:['#22C2FF', '#5EB3FF'],
        //     itemStyle: {
        //       shadowBlur: 0
        //     },
        //     data: [
        //       this.percentage51,
        //       {
        //         value: this.percentage51,
        //         direction: 'left',
        //       },
        //     ],
        //     backgroundStyle: {
        //       borderWidth: 1,
        //       color: 'transparent',
        //     },
        //     label: {
        //       normal: {
        //         formatter: '',
        //       },
        //     },
        //     outline: {
        //       show: true,
        //       itemStyle: {
        //         borderWidth: 0,
        //       },
        //       borderDistance: 0,
        //     },
        //   },
        //   {
        //     name: '',
        //     type: 'bar',
        //     roundCap: true,
        //     z: 2,
        //     showBackground: true,
        //     backgroundStyle: {
        //       color: '#EEEEEE',
        //     },
        //     data: [(this.percentage51 * 100).toFixed(0)],
        //     coordinateSystem: 'polar',
        //     itemStyle: {
        //       normal: {
        //         color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [
        //           {
        //             offset: 0,
        //             color: '#5acef2',
        //           },
        //           {
        //             offset: .7,
        //             color: '#5073fb',
        //           },
        //           {
        //             offset: 1,
        //             color: '#6ae8d8',
        //           },
        //         ]),
        //       },
        //     },
        //   },
        // ]
        series: [{
          type: 'gauge',
          min: 0,
          max: 1,
          splitNumber: 14,
          axisLine: {
            lineStyle: {
              width: 15,
              color: [
                [0.42, '#FF6E76'],
                [0.5, '#7CFFB2'],
                [0.64, '#7CFFB2'],
                [1, '#FF6E76']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            show:false
          },
          splitLine: {
            distance: -20,
            length: 20,
            lineStyle: {
              color: '#fff',
              width: 4
            }
          },
          axisLabel: {
            color: 'auto',
            distance: -15,
            fontSize: 13,
            formatter: function (value) {
              return Math.round(value * 14);
            },
          },
          title: {
            offsetCenter: [0, '40%'],
            fontSize: 20
          },
          detail: {
            fontSize: 30,
            offsetCenter: [0, '80%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 14);
            },
            color: 'auto'
          },
          data: [{
            name: 'PH',
            value: this.percentage51,
          }]
        }]
      }
      // 绘制图表
      this.myChart51.setOption(this.option51)
    },
    renderMyChart52 () {
      this.myChart52 = echarts.init(document.getElementById('annular52'))
      // this.value52 = 0.4;
      this.option52 = {
        backgroundColor: '#fff',
        title: [
          {
            text: this.value52 + '%' + '\n' + '水温',
            left: '48%',
            top: '40%',
            textAlign: 'center',
            textStyle: {
              fontSize: '18',
              fontWeight: '400',
              color: '#333333',
              textAlign: 'center',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#000',
              textShadowBlur: '0',
              textShadowOffsetX: 0,
              textShadowOffsetY: 1
            }
          }
        ],
        polar: {
          radius: ['65%', '83%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          clockwise: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            z: 1,
            center: ['50%', '50%'],
            color:['#22C2FF', '#5EB3FF'],
            itemStyle: {
              shadowBlur: 0
            },
            data: [
              this.percentage52,
              {
                value: this.percentage52,
                direction: 'left',
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: 'transparent',
            },
            label: {
              normal: {
                formatter: '',
              },
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 1,
              },
              borderDistance: 0,
            },
          },
          // {
          //   name: '',
          //   type: 'bar',
          //   roundCap: true,
          //   z: 2,
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: '#EEEEEE',
          //   },
          //   data: [(this.percentage52 * 100).toFixed(0)],
          //   coordinateSystem: 'polar',
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [
          //         {
          //           offset: 0,
          //           color: '#5acef2',
          //         },
          //         {
          //           offset: .7,
          //           color: '#5073fb',
          //         },
          //         {
          //           offset: 1,
          //           color: '#6ae8d8',
          //         },
          //       ]),
          //     },
          //   },
          // },
        ]
      }
      // 绘制图表
      this.myChart52.setOption(this.option52)
    },
    renderMyChart53 () {
      this.myChart53 = echarts.init(document.getElementById('annular53'))
      // this.value53 = 0.4;
      this.option53 = {
        backgroundColor: '#fff',
        title: [
          {
            text: this.value53 + '%' + '\n' + '水温',
            left: '48%',
            top: '40%',
            textAlign: 'center',
            textStyle: {
              fontSize: '18',
              fontWeight: '400',
              color: '#333333',
              textAlign: 'center',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#000',
              textShadowBlur: '0',
              textShadowOffsetX: 0,
              textShadowOffsetY: 1
            }
          }
        ],
        polar: {
          radius: ['65%', '83%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          clockwise: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            z: 1,
            center: ['50%', '50%'],
            color:['#22C2FF', '#5EB3FF'],
            itemStyle: {
              shadowBlur: 0
            },
            data: [
              this.percentage53,
              {
                value: this.percentage53,
                direction: 'left',
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: 'transparent',
            },
            label: {
              normal: {
                formatter: '',
              },
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 1,
              },
              borderDistance: 0,
            },
          },
          // {
          //   name: '',
          //   type: 'bar',
          //   roundCap: true,
          //   z: 2,
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: '#EEEEEE',
          //   },
          //   data: [(this.percentage53 * 100).toFixed(0)],
          //   coordinateSystem: 'polar',
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [
          //         {
          //           offset: 0,
          //           color: '#5acef2',
          //         },
          //         {
          //           offset: .7,
          //           color: '#5073fb',
          //         },
          //         {
          //           offset: 1,
          //           color: '#6ae8d8',
          //         },
          //       ]),
          //     },
          //   },
          // },
        ]
      }
      // 绘制图表
      this.myChart53.setOption(this.option53)
    },
    renderMyChart54 () {
      this.myChart54 = echarts.init(document.getElementById('annular54'))
      // this.value54 = 0.4;
      this.option54 = {
        backgroundColor: '#fff',
        title: [
          {
            text: this.value54 + '%' + '\n' + '水温',
            left: '48%',
            top: '40%',
            textAlign: 'center',
            textStyle: {
              fontSize: '18',
              fontWeight: '400',
              color: '#333333',
              textAlign: 'center',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#000',
              textShadowBlur: '0',
              textShadowOffsetX: 0,
              textShadowOffsetY: 1
            }
          }
        ],
        polar: {
          radius: ['65%', '83%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          clockwise: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            z: 1,
            center: ['50%', '50%'],
            color:['#22C2FF', '#5EB3FF'],
            itemStyle: {
              shadowBlur: 0
            },
            data: [
              this.percentage54,
              {
                value: this.percentage54,
                direction: 'left',
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: 'transparent',
            },
            label: {
              normal: {
                formatter: '',
              },
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 1,
              },
              borderDistance: 0,
            },
          },
          // {
          //   name: '',
          //   type: 'bar',
          //   roundCap: true,
          //   z: 2,
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: '#EEEEEE',
          //   },
          //   data: [(this.percentage54 * 100).toFixed(0)],
          //   coordinateSystem: 'polar',
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [
          //         {
          //           offset: 0,
          //           color: '#5acef2',
          //         },
          //         {
          //           offset: .7,
          //           color: '#5073fb',
          //         },
          //         {
          //           offset: 1,
          //           color: '#6ae8d8',
          //         },
          //       ]),
          //     },
          //   },
          // },
        ]
      }
      // 绘制图表
      this.myChart54.setOption(this.option54)
    },
    renderMyChart55 () {
      this.myChart55 = echarts.init(document.getElementById('annular55'))
      // this.value55 = 0.4;
      this.option55 = {
        backgroundColor: '#fff',
        title: [
          {
            text: this.value55 + '%' + '\n' + '水温',
            left: '48%',
            top: '40%',
            textAlign: 'center',
            textStyle: {
              fontSize: '18',
              fontWeight: '400',
              color: '#333333',
              textAlign: 'center',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#000',
              textShadowBlur: '0',
              textShadowOffsetX: 0,
              textShadowOffsetY: 1
            }
          }
        ],
        polar: {
          radius: ['65%', '83%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          clockwise: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            z: 1,
            center: ['50%', '50%'],
            color:['#22C2FF', '#5EB3FF'],
            itemStyle: {
              shadowBlur: 0
            },
            data: [
              this.percentage55,
              {
                value: this.percentage55,
                direction: 'left',
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: 'transparent',
            },
            label: {
              normal: {
                formatter: '',
              },
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 1,
              },
              borderDistance: 0,
            },
          },
          // {
          //   name: '',
          //   type: 'bar',
          //   roundCap: true,
          //   z: 2,
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: '#EEEEEE',
          //   },
          //   data: [(this.percentage55 * 100).toFixed(0)],
          //   coordinateSystem: 'polar',
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [
          //         {
          //           offset: 0,
          //           color: '#5acef2',
          //         },
          //         {
          //           offset: .7,
          //           color: '#5073fb',
          //         },
          //         {
          //           offset: 1,
          //           color: '#6ae8d8',
          //         },
          //       ]),
          //     },
          //   },
          // },
        ]
      }
      // 绘制图表
      this.myChart55.setOption(this.option55)
    },
    getright_table1(){
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table1
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, "mouseenter", function() {
        isScroll = false
      })
      this.addEvent(divData, "mouseleave", function() {
        isScroll = true
      })
      setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    getright_table2(){
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table2
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, "mouseenter", function() {
        isScroll = false
      })
      this.addEvent(divData, "mouseleave", function() {
        isScroll = true
      })
      setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent(obj,sEvent,fn){
      if(obj.attachEvent){
        obj.attachEvent("on"+sEvent,fn)
      }else{
        obj.addEventListener(sEvent,fn,false)
      }
    },
    formatDate (date, fmt) {
      if (!date) return
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      let o = {
        'M+': addZero(date.getMonth() + 1),
        'd+': addZero(date.getDate()),
        'h+': addZero(date.getHours()),
        'm+': addZero(date.getMinutes()),
        's+': addZero(date.getSeconds())
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, str)
        }
      }
      function addZero (num) {
        return num >= 10 ? num : '0' + num
      }
      return fmt
    },
  }
}
</script>
<style lang='scss' scoped>
.subject{
  width: 100%;
  margin-top: 20px;
  .tab{
    display: flex;
    justify-content:flex-start;
    margin-top: 20px;
    .Unit{
      padding: 0 40px;
      height: 291px;
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
      // margin-left: 1.4%;
      padding-bottom: 20px;
      .Unit-title{
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        padding: 20px;
        color: #333333;
      }
      .background1{
        width: 20%;
        background-color: #EDF4FF;
        margin-right: 20px;
        padding: 10px;
      }
      .font1{
        margin-bottom: 5px;
        font-size: 16px;
        color: #333333;
      }
      .font2{
        font-weight: 700;
        // margin-left: 120px;
        margin-right: 10px;
        font-size: 30px;
      }
      .font3{
        margin-bottom: 5px;
        font-size: 16px;
        color: #979797;
      }
    }
  }
}
.yuanqu{
  margin-top: 20px;
  height: 690px;
  // width: 1160px;
  width: 100%;
  .left_baidu{
    position: relative;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    // margin: 20px;
    height: 690px;
    // width: 685px;
    width: 100%;
  }
  .right_all{
    height: 690px;
    // width: 450px;
    width: 32%;
    margin-bottom: 20px;
    margin-left: 1.4%;
    .right_top{
      height: 420px;
      // width: 455px;
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }
    .right_center{
      height: 250px;
      // width: 455px;
      width: 100%;
      // margin: 20px 0px 20px 0px;
      margin: 20px 0px 0px 0px;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }
  }
}
.securitybottom {
  height: 250px;
  margin-top: 20px;
  .safePersonCount {
    height: 400px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
  .safePersonCount_title {
    padding: 20px;
    text-align: center;
  }
  .title_sty{
    font-size: 18px;
    font-weight: 700;
    color: #333333;
  }
  .warnControll {
    height: 250px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
  .warnControll_charts {
    width: 100%;
    padding: 0px 40px 10px 40px;
  }
}
.fiveChart{
  display: flex;
  width: 100%;
  padding: 0 20px;
  .item{
    width: 20%;
    height: 170px;
  }
}
.flexbox{
  width: 60px;
  height: 100px;
  margin-left:20%;
  margin-right: 30px;
  display: flex;
  align-items: center
}
.flexbox img{
  width: 60px;
  height: 60px;
  align-items: center;
}
.flexbox2{
  width: 160px;
  // height: 100px;
  // line-height: 100px;
  font-weight: 500;
  text-align: left;
  font-size: 18px;
  color: #333333;
}

/deep/.el-date-editor.el-input{
  width: 150px;
}
.datepicker{
  opacity:0.8;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
}
.primaryButton {
  color: #FFFFFF;
  background-color: #1492ff;
  border-color: #1492ff;
}
</style>
<style>
.blue .el-input-group__append{
  background-color: #2690F3;
}
</style>
